<template>
  <div class="view">

    <div class="Box">
      <div :class="isAnswer?'topBox':'topBox boxSwitch'">
        <div class="option" @click="answerOn(1)">已回复问题</div>
        <div class="option" @click="answerOff(1)">未回复问题</div>
      </div>
      <div v-if="isAnswer">
        <table class="table">
          <tr class="tableTitle" >
            <td>提问内容</td>
            <td>提问人</td>
            <td>提问时间</td>
            <td>回复问题</td>
          </tr>
          <tr v-for="item in ask" @mouseenter="removeHover($event)" @mouseleave="removeLeave($event)">
            <td >
              <span class="remove" @click="remove(item.id)"><i class="el-icon-delete"></i></span>
              <span class="ov">{{ item.wtwnr }}</span>
            </td>
            <td>{{ item.username }}</td>
            <td>{{ item.createTime }}</td>
            <td><router-link :to="{name:'answerEditor',params:{item}}" class="notUnderline"><i class="el-icon-chat-dot-round"></i></router-link></td>
          </tr>
        </table>

        <div class="t_paging">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-count="pageNum"
            :current-page="index"
            @current-change="pageChange">
          </el-pagination>
        </div>
      </div>

      <div v-if="!isAnswer">
        <table class="table">
          <tr class="tableTitle">
            <td>提问内容</td>
            <td>提问人</td>
            <td>提问时间</td>
          </tr>
          <tr v-for="item in ask" @mouseenter="removeHover($event)" @mouseleave="removeLeave($event)">
            <td>
              <span class="remove" @click="remove(item.id)"><i class="el-icon-delete"></i></span>
              <span class="ov"><router-link class="notUnderline" :to="{name:'answerEditor',params:{item}}">{{ item.wtwnr }}</router-link></span>
            </td>
            <td>{{ item.username }}</td>
            <td>{{ item.createTime }}</td>
          </tr>
        </table>

        <div class="t_paging">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-count="pageNum"
            :current-page.sync="index"
            @current-change="pageChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AskAndAnswer",
  data(){
    return{
      index: 1,
      isAnswer: true,
      pageNum: 5,
      ask: []
    }
  },
  methods:{
    removeLeave(e){
      e.target.getElementsByClassName("remove")[0].style.opacity = "0"
    },
    removeHover(e){
      e.target.getElementsByClassName("remove")[0].style.opacity = "1"
    },
    remove(id){
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: "/wtzx/remove",
          method: "get",
          params: {
            id: id,
          }
        }).then(res => {
          if (res.data){
            this.$message.info("删除成功")
            this.pageChange(1)
          } else {
            this.$message.info("删除失败")
          }
        }).catch(()=>{
          this.$message.info("删除失败")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateAsk(item){
      this.$router.push({name: 'answerEditor',params: {item}})
    },
    answerOn(pageIndex){
      this.index = pageIndex
      this.isAnswer = false
      this.initPageSize()
      this.$axios({
        url: "/wtzx/getWted",
        method: "get",
        params: {
          pageIndex: pageIndex-1
        }
      }).then(res=>{
        this.ask = res.data
      })
    },
    answerOff(pageIndex){
      this.index = pageIndex
      this.isAnswer = true
      this.initPageSize()
      this.$axios({
        url: "/wtzx/getWtun",
        method: "get",
        params: {
          pageIndex: pageIndex-1
        }
      }).then(res=>{
        this.ask = res.data
      })
    },
    pageChange(pageIndex){
      if (this.isAnswer){
        this.answerOff(pageIndex)
      } else {
        this.answerOn(pageIndex)
      }
    },
    initPageSize(){
      this.$axios({
        url: "/wtzx/getPageByState",
        method: "get",
        params: {
          state: this.isAnswer?0:1
        }
      }).then(res=>{
        this.pageNum = res.data
      })
    }
  },
  created() {
    this.initPageSize()
    this.pageChange(1)
  }
}
</script>

<style src="../css/pageSplit.css" scoped></style>
<style scoped>
.ov{
  /*max-width: 300px;*/
  margin: auto auto;
  width: 300px;
  display:-webkit-box;/*设置为弹性盒子*/
  overflow:hidden;/*超出隐藏*/
  text-overflow:ellipsis;/*显示省略号*/
  -webkit-line-clamp:1;/*多少行后显示省略号，这里设置为第一行超出后显示省略号*/
  word-break:break-all;/*强制英文单词自动换行,可要可不要*/
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素*/
}
.remove{
  float: left;margin-left: 5px;
  cursor: pointer;
  opacity: 0;
}
.notUnderline{
  color: white;
  text-decoration: none;
}
.notUnderline:hover{
  color: lightgray;
  text-decoration: underline;
}
.table{
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse
}
.table>tr>td{
  height: 50px;
}
.table>tr:nth-child(2n+1){
  background-color: rgba(37, 80, 174, 0.55);
}
.table>tr:nth-child(2n){
  background-color: rgba(255, 255, 255, 0.2);
}
.boxSwitch{
  background-color: rgba(0,255,0,0.1) !important;
}
.boxSwitch>div:first-child{
  color: #02B975;
}
.boxSwitch>div:last-child{
  color: white!important;
}
.topBox>div:last-child{
  color: #E25058;
}
.option{
  color: white;
  font-size: 18px;
  height: 70px;
  line-height: 70px;
  margin-left: 30px;
  font-weight: 600;
}
.topBox{
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 70px;
  border-radius: 10px;
  display: flex;
  background-color: rgba(255,0,0,0.1);
}
.Box{
  margin-left: 30px;
  margin-right: 30px;
}
.view{
  width: 100%;
  height: 100%;
}
</style>
